<!--
 * @Author: actor
 * @Date: 2023-11-13 15:42:40
 * @email: 395593455@qq.com
 * @LastEditors: actor
 * @LastEditTime: 2023-12-19 10:19:33
 * @FilePath: \i-hos-app\shared\emr\src\components\file\PaperSet.vue
 * @Description: 纸张配置组件
-->
<template>
  <el-dialog
    v-model="_paper_visible"
    width="285"
    :before-close="
      () => {
        _paper_visible = false
      }
    "
  >
    <template #header="{ titleId, titleClass }">
      <div :id="titleId" :class="titleClass">页面设置</div>
    </template>

    <div class="paper_set">
      <el-form label-width="60px">
        <!-- 纸张配置选择 -->
        <el-form-item
          :label="key.toString() == '_pd' ? '纸张方向' : key.toString() == '_ps' ? '纸张尺寸' : '页边距'"
          v-for="(val, key) in _emr_paper_config"
          :key="key"
        >
          <el-radio-group v-if="key.toString() == '_pd'" v-model="selectPaper._orien">
            <el-radio v-for="obj in val" :key="obj._label" :label="obj._label">{{ obj._val }}</el-radio>
          </el-radio-group>
          <el-select
            v-else
            :model-value="key.toString() == '_ps' ? selectPaper._n : selectPaper._e_n"
            :placeholder="key.toString() == '_ps' ? '选择纸张尺寸' : '设置页边距'"
            placement="bottom-end"
          >
            <el-option
              v-for="(obj, index) in val"
              :key="obj._label"
              :label="key.toString() == '_ps' ? obj._label + ' [ ' + obj._w + 'mm' + '*' + obj._h + 'mm' + ' ]' : obj._label"
              :value="obj._val"
              @click="handChangeSelect({ val, key, index })"
            ></el-option>
          </el-select>
        </el-form-item>

        <!-- 页边距值 -->
        <el-form-item>
          <el-form>
            <el-form-item v-for="item in selectPaper._e_list" :label="item._n" :key="item._n">
              <el-input-number
                v-model="item._val"
                class="mx-4"
                :min="10"
                :max="100"
                :step="0.1"
                :precision="2"
                controls-position="right"
              />
              mm
            </el-form-item>
          </el-form>
        </el-form-item>

        <!-- 按钮 -->
        <el-form-item>
          <el-button
            @click="
              () => {
                _paper_visible = false
              }
            "
            >取消</el-button
          >
          <el-button type="primary" @click="handSureClick">确定</el-button>
        </el-form-item>
      </el-form>
    </div>
  </el-dialog>
</template>

<script setup lang="ts">
  import { reactive, toRefs } from 'vue'
  import { ISetPaperState, ISetPaper } from '../../interface/set'

  // 电子病历配置数据
  import { usePaperSetStore } from '../../store/paperSet'

  // 解构 store的配置数据
  const paperSetStore: ISetPaperState = usePaperSetStore()
  const { _emr_paper_set, _paper_visible, _emr_paper_config } = toRefs<any>(paperSetStore)

  // 初始化数据
  // 纸张初始选中的配置状态
  let selectPaper: ISetPaper = reactive({
    _n: _emr_paper_set.value._n,
    _w: _emr_paper_set.value._w,
    _h: _emr_paper_set.value._h,
    _orien_n: _emr_paper_set.value._orien_n,
    _orien: _emr_paper_set.value._orien,
    _e_n: _emr_paper_set.value._e_n,
    _e: _emr_paper_set.value._e,
    _e_list: [],
  })
  for (let key in _emr_paper_set.value) {
    if (!!selectPaper._e_list) {
      switch (key) {
        case '_t_e':
          selectPaper._e_list.push({ _n: '上', _val: _emr_paper_set.value[key] })
          break
        case '_b_e':
          selectPaper._e_list.push({ _n: '下', _val: _emr_paper_set.value[key] })
          break
        case '_r_e':
          selectPaper._e_list.push({ _n: '右', _val: _emr_paper_set.value[key] })
          break
        case '_l_e':
          selectPaper._e_list.push({ _n: '左', _val: _emr_paper_set.value[key] })
          break
      }
    }
  }

  // 设置纸张的尺寸以及边距
  const handChangeSelect = (flag: any): void => {
    let _d: any = flag.val[flag.index]
    if (flag.key == '_ps') {
      selectPaper._h = _d._h
      selectPaper._w = _d._w
      selectPaper._n = _d._label
    } else {
      selectPaper._e_n = _d._label
      selectPaper._e = _d._w
      if (!!selectPaper._e_list) {
        selectPaper._e_list[0]._val = _d._w
        selectPaper._e_list[1]._val = _d._w
        selectPaper._e_list[2]._val = _d._h
        selectPaper._e_list[3]._val = _d._h
      }
    }
  }

  // 更改纸张配置后， 确认修改store的状态
  const handSureClick = (): void => {
    paperSetStore.$patch?.((state: ISetPaperState): void => {
      // 修改store的数据
      let store: ISetPaper = state._emr_paper_set
      store._n = selectPaper._n
      store._orien = selectPaper._orien
      store._w = selectPaper._orien == 1 ? selectPaper._w : selectPaper._h
      store._h = selectPaper._orien == 1 ? selectPaper._h : selectPaper._w
      store._orien_n = selectPaper._orien == 1 ? '纵向' : '横向'
      store._e_n = selectPaper._e_n
      if (!!selectPaper._e_list) {
        store._e = selectPaper._e_list[0]._val as number
        store._t_e = selectPaper._e_list[0]._val as number
        store._b_e = selectPaper._e_list[1]._val as number
        store._r_e = selectPaper._e_list[2]._val as number
        store._l_e = selectPaper._e_list[3]._val as number
      }
      state._paper_visible = false // 关闭弹层
    })
  }
</script>

<style lang="scss" scoped>
  .paper_set {
    margin-top: -20px;
  }
  .el-form-item .el-form-item {
    margin-bottom: 15px;
  }
  .el-select-dropdown__item {
    padding: 0 10px;
  }
  .el-input-number {
    margin-right: 5px;
  }
</style>
